<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="page-title">精彩</view>

    <!-- 功能卡片区域 -->
    <view class="card-container">
      <!-- 发行作品卡片 -->
      <view class="function-card" @click="navigateToC">
        <view class="card-left">
          <view class="card-title-line">
            <text class="card-title">发行作品</text>
            <view class="go-button pink">GO</view>
          </view>
          <text class="card-desc">创作发行NFT作品</text>
        </view>
				<image class="card-image" src="/static/images/w1.png" mode="aspectFit"></image>
      </view>

      <!-- 挂单交易卡片 -->
      <view class="function-card" @click="navigateTo('list')">
        <view class="card-left">
          <view class="card-title-line">
            <text class="card-title">挂单交易</text>
            <view class="go-button orange">GO</view>
          </view>
          <text class="card-desc">收藏NFT作品挂单</text>
        </view>
				<image class="card-image" src="/static/images/w2.png" mode="aspectFit"></image>
      </view>

      <!-- 交易市场卡片 -->
      <view class="function-card disabled">
        <view class="card-left">
          <view class="card-title-line">
            <text class="card-title">交易市场</text>
            <view class="go-button purple">GO</view>
          </view>
          <text class="card-desc">尚未开启</text>
        </view>
				<image class="card-image" src="/static/images/w3.png" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
const navigateToC = () => {
  uni.navigateTo({
		url: `/pages/create/create`
  });
};
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
  background: linear-gradient(to bottom, #e6f7ff, #f0f9ff);
  padding: 40rpx 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.page-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 40rpx 0 50rpx;
}

.card-container {
  display: flex;
  flex-direction: column;
  gap: 40rpx; /* 卡片间距 */
}

.function-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);

  &.disabled {
    opacity: 0.6;
  }
}

.card-left {
  flex: 1;
}

.card-title-line {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx; /* 减小标题与描述的间距 */
}

.card-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx; /* 标题与GO按钮间距 */
}

.card-desc {
  font-size: 28rpx;
  color: #666;
}

.go-button {
  width: 70rpx;
  height: 36rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;

  &.pink {
    background-color: #ff9a9e;
  }

  &.orange {
    background-color: #ffb347;
  }

  &.purple {
    background-color: #8e54e9;
  }
}

.card-image {
  width: 120rpx;
  height: 120rpx;
}

/* 图标阴影 */
.function-card:nth-child(1) .card-image {
  filter: drop-shadow(0 6rpx 12rpx rgba(255, 154, 158, 0.3));
}

.function-card:nth-child(2) .card-image {
  filter: drop-shadow(0 6rpx 12rpx rgba(255, 179, 71, 0.3));
}

.function-card:nth-child(3) .card-image {
  filter: drop-shadow(0 6rpx 12rpx rgba(142, 84, 233, 0.3));
}
</style>
